<template>
  <div id='QualityNode'>
    <Breadcrumb content='控制节点' />
    <div class='bodyContent'>
      <el-tabs type='border-card'>
        <el-tab-pane label='控制节点'>
          <Splitpanes class='area'>
            <Pane size='55'>
              <vxe-toolbar perfect>
                <template #buttons>
                  <span class='smallToolTitle'>名称模糊查找:</span>
                  <vxe-input v-model='form.antName' placeholder='名称' class='vxeInputSearch' type='text' clearable
                             @clear='findPageList'></vxe-input>
                  <vxe-button type='text' icon='vxe-icon-search' class='button-blue SearchBtn' content='查询'
                              :loading='loading' @click='findPageList'></vxe-button>
                  <vxe-button type='text' icon='vxe-icon-add' class='button-blue' content='新增'
                              @click='insertEvent'></vxe-button>
                </template>
              </vxe-toolbar>

              <div class='tableBox'>
                <vxe-table ref='tableRef' border='inner' align='left' class='mytable-scrollbar' height='auto'
                           :data='stageTypeList'
                           :expand-config='{ expandAll: true, reserve: true }'
                           :row-config='{ isCurrent: true, isHover: true }'
                           :keyboard-config='{ isArrow: true, isTab: true, isEdit: true }'
                           :edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
                           resizable show-overflow keep-source @current-change='roleRowClick'>
                  <vxe-column type='checkbox' width='30px'></vxe-column>
                  <vxe-column field='code' title='节点编码'></vxe-column>
                  <vxe-column field='name' title='节点名称'></vxe-column>
                  <vxe-column field='uploadSum' title='文件上传数量'></vxe-column>
                  <vxe-column field='uploadType' title='文件上传类型'></vxe-column>
                  <vxe-column field='isEnable' title='是否启用'>
                    <template #default='{ row }'>
                      <el-tag type='danger' v-if='row.isEnable === 0'>否</el-tag>
                      <el-tag type='success' v-else-if='row.isEnable === 1'>是</el-tag>
                      <span v-else>——</span>
                    </template>
                  </vxe-column>
                  <vxe-column title='操作' width='200' show-overflow>
                    <template #default='{ row }'>
                      <vxe-button status="danger" content="删除" class="deleteBtn"  icon='vxe-icon-delete' @click='removeEvent(row)'></vxe-button>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </Pane>

            <Pane size='45'>
              <el-tabs type='border-card'>
                <el-tab-pane label='基本信息'>
                  <el-form ref='formRef' :model='formData' label-width='110px' class='form-input-m' inline-message>
                    <el-row :gutter='20'>
                      <el-col :span='20'>
                        <el-form-item label='编码' prop='code'>
                          <el-input v-model='formData.code' placeholder='请输入编码' clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter='20'>
                      <el-col :span='20'>
                        <el-form-item label='名称' prop='name'>
                          <el-input v-model='formData.name' placeholder='请输入名称' clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter='20'>
                      <el-col :span='20'>
                        <el-form-item label='文件上传数量' prop='uploadSum'>
                          <el-input v-model='formData.uploadSum' placeholder='请输入文件上传数量' type='number' clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter='20'>
                      <el-col :span='20'>
                        <el-form-item label='文件上传类型' prop='uploadType'>
                          <el-select v-model='formData.uploadType' placeholder='下拉选择' style='width: 200px;'>
                            <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value' />
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter='20'>
                      <el-col :span='20'>
                        <el-form-item label='是否启用' prop='isEnable'>
                          <el-switch v-model='formData.isEnable' inline-prompt active-text='是' inactive-text='否'
                                     :active-value='1' :inactive-value='0'></el-switch>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter='20'>
                      <el-col :span='20'>
                        <el-form-item>
                          <el-button type='primary' @click='saveForm'>保存</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>

                </el-tab-pane>
              </el-tabs>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label='操作日志'>
          <LogInfo requestUrl='/wk/quality/node'></LogInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang='ts'>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { AppStore } from '@/stores/store';
import { IsEmpty } from '@/utils/common';
import { VxeNotifyType, VxeMessage } from '@/utils/CommonMessage';

import 'vue3-pdf-app/dist/icons/main.css';
import LogInfo from '@/components/LogInfo.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let tableRef: any = ref(null);
let store = AppStore();
let form = reactive({
  antName: '' //名称
});
const options = [
  {
    value: 'pdf',
    label: 'PDF'
  },
  {
    value: 'img',
    label: '图片'
  }
];

let formData = reactive({
  id: '',
  code: '' /*编码*/,
  name: '' /*名称*/,
  isEnable: 1,
  uploadType: '',
  uploadSum: 1
});

let stageTypeList: any = reactive([]); //表格列表
let groupFormulaList: any = reactive([]); //表格列表
let loading = ref(false); //查询按钮加载
let showTemplateDialog = ref(false);
let saveLoading = ref(false);

let refFormData: any = ref(null); //信息表单ref
// let fileLimit = ref(2);
let pdfUrl = ref('');
/**
 * 页面加载时
 */
onMounted(() => {
  findPageList();
});


// ################################################################################################

// function onUpload(rawFile) {
//   const rawFileName = rawFile.file.name;
//   const suffix = rawFileName.substring(rawFileName.lastIndexOf('.'));
//   const fileName = new Date().getTime().toString() + suffix;
//
//   let formData = new FormData();
//   formData.append('file', rawFile.file, fileName);
//   axios.post(
//     (window as any).apiUrl.VITE_SERVER_URL + '/file/upload',
//     formData,
//     { headers: { 'Content-Type': 'multipart/form-data' } }
//   ).then(res => {
//     if (res.status == 200) {
//       VxeMessage('上传成功', VxeNotifyType.success);
//       const fileUrl = (window as any).apiUrl.VITE_SERVER_URL + '/file/reload/' + fileName;
//       const fileDataVo = {
//         rawFileName: rawFileName,
//         suffix: suffix,
//         fileName: fileName,
//         fileUrl: fileUrl,
//         fileType: rawFile.file.type
//       };
//       groupFormulaList.push(fileDataVo);
//     }
//   }).catch(error => {
//     VxeMessage('上传过程中出现错误', VxeNotifyType.error);
//   });
// }
//
// function beforeAvatarUpload(rawFile) {
//   console.log("文件格式==>" ,rawFile.type);
//   if (rawFile.type.split('/')[0] === 'image' || rawFile.type === 'application/pdf') {
//     if (rawFile.size < (20 * 1024 * 1024)) {
//       return true;
//     }
//   }
//   VxeMessage('文件大小或格式不正确！', VxeNotifyType.error);
//   return false;
// }
//
// function showPdf(row: any) {
//   pdfUrl.value = row.fileUrl;
//   showTemplateDialog.value = true;
// }


// ################################################################################################

/**
 * 获取表格数据
 */
function findPageList() {
  loading.value = true;
  stageTypeList.length = 0;
  const url = '/wk/quality/node/page';
  let params = { searchValue: form.antName };
  proxy.$http.get(url, { params: params }).then((res: any) => {
    stageTypeList.push(...res.data);
    if (stageTypeList.length > 0) {
      roleRowClick({
        row: stageTypeList[0],
        rowIndex: 0
      });
    }
    loading.value = false;
  }).catch((err: any) => {
    loading.value = false;
    VxeMessage('搜索控制节点列表异常', VxeNotifyType.error);
  });
}

function roleRowClick({ row }: any) {
  formData.id = row.id;
  formData.code = row.code;
  formData.name = row.name;
  formData.isEnable = row.isEnable;
  (proxy.$refs.tableRef as any).setCurrentRow(row);
}

function insertEvent() {
  clearFormData();
}

/**
 * 提交表单
 */
function saveForm() {
  let url = '';
  // 判断添加和编辑接口
  let isAdd = true;
  if (IsEmpty(formData.id)) {
    url = '/wk/quality/node/add';
  } else {
    isAdd = false;
    url = '/wk/quality/node/update';
  }
  proxy.$http.post(url, formData).then((res: any) => {
    if (res.status.code === 1) {
      if (isAdd) {
        VxeMessage('新增成功', VxeNotifyType.success);
      } else {
        VxeMessage('修改成功', VxeNotifyType.success);
      }
      findPageList();
    } else {
      if (isAdd) {
        VxeMessage('新增失败', VxeNotifyType.error);
      } else {
        VxeMessage('修改失败', VxeNotifyType.error);
      }
      return;
    }
  }).catch((err: any) => {
    VxeMessage('新增异常', VxeNotifyType.error);
  });
  clearFormData(); //清空数据
}

function clearFormData() {
  formData.id = '';
  formData.code = '';
  formData.name = '';
  formData.isEnable = 1;
}

/**
 * 删除按钮
 */
function removeEvent(row: any) {
  const $table = tableRef.value;
  if (row.id) {
    const url = '/wk/quality/node/delete';
    proxy.$http.post(url, { id: row.id }).then((res: any) => {
      findPageList();
      VxeMessage(res.status.msg, VxeNotifyType.success);
    }).catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
  } else {
    $table.remove(row);
  }
}

</script>

<style lang='scss' scoped>
#QualityNode {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .el-tabs {
      height: 100%;

      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0px;

        .el-tab-pane {
          height: 100%;

          .area {
            background-color: $base-white;
          }

          // 附加按钮间距
          .button-blue,
          .button-red {
            margin: 5px 0 5px 5px;
          }

          // 查询按钮
          .SearchBtn {
            margin-right: 5px;
          }

          .tableBox {
            height: calc(100% - 40px);

            .deleteBtn {
              border-radius: 5px;
            }
          }

          .el-form {
            padding: 15px 20px;
          }
        }
      }
    }
  }
}
</style>

